<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="pay-box com-box">

			<view class="price-box">
				<text>支付定金</text>
				<text class="price">{{price}}</text>
			</view>

			<!-- #ifdef H5 -->
			<view class="price-box" style="height: 280px; margin-top: -50px;">
				<image src="/static/errorImage.jpg" mode="widthFix" style="width: 200px; height: 200px;"></image>
				<view style="margin-top: 15px;">使用微信扫描二维码</view>
			</view>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<view class="pay-type-list">
				<view class="type-item" @click="changePayType(1)">
					<text class="icon icon-wechat"></text>
					<view class="con">
						<text class="tit">微信支付</text>
						<text>推荐使用微信支付</text>
					</view>
					<label class="radio">
						<radio value="" color="#0251f4" :checked='payType == 1' />
						</radio>
					</label>
				</view>
			</view>

			<button type="primary" :disabled="submiting" class="add-btn" @click="confirm">确认支付</button>
			<!-- #endif -->

		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	export default {
		components: {
			uniHeader,
			uniFooter
		},
		data() {
			return {
				payType: 1,
				price: 0,
				allOrder: '',
				submiting: false
			}
		},
		computed: {},
		onLoad(option) {
			this.price = option.price
			this.allOrder = option.allOrder
			// #ifdef H5
			//请求二维码
			// #endif
		},
		methods: {
			//选择支付方式
			changePayType(type) {
				this.payType = type
			},
			//确认支付
			confirm() {
				if (this.payType === 1) {
					this.submiting = true
					this.$api.request('/backtest/wxBack', {
						allOrder: this.allOrder
					}, {
						content: 'application/x-www-form-urlencoded',
						failback: failres => {
							this.submiting = false
							this.$api.msg(failres.message)
						}
					}).then(prepayRes => {
						this.submiting = false
						uni.redirectTo({
							url: '/pages/pay/success'
						})
						uni.requestPayment({
							provider: 'wxpay',
							appId: prepayRes.data.appId,
							nonceStr: prepayRes.data.nonceStr,
							package: prepayRes.data.packageValue,
							timeStamp: prepayRes.data.timeStamp,
							signType: prepayRes.data.signType,
							paySign: prepayRes.data.paySign,
							success: function(res) {
								uni.redirectTo({
									url: '/pages/pay/success'
								})
							},
							fail: function(res) {
								console.log("支付过程失败");
								this.$api.msg(JSON.stringify(res))
							},
							complete: function(res) {
								console.log("支付过程结束")
							}
						});
					})
				} else if (this.payType === 2) {
					// this.submiting = true
					// this.$api.request('order', 'offlinePrepay', {
					// 	allOrder: this.allOrder
					// }, failres => {
					// 	this.submiting = false
					// 	this.$api.msg(failres.message)
					// }).then(res => {
					// 	uni.redirectTo({
					// 		url: '/pages/pay/success'
					// 	})
					// })
				}
			}
		}
	}
</script>

<style lang='scss'>
	.container {
		width: 100%;
	}

	.price-box {
		background-color: #fff;
		height: 265upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #909399;

		.price {
			font-size: 50upx;
			color: #303133;
			margin-top: 12upx;

			&:before {
				content: '￥';
				font-size: 40upx;
			}
		}
	}

	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;

		.type-item {
			height: 120upx;
			padding: 20upx 60upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1upx solid $base-color-light;

			&:first-child {
				border: 0;
			}
		}

		.icon {
			margin-right: 20upx;
			font-size: 52upx;
		}

		.icon-huodaofukuan {
			color: #01aaef;
		}

		.icon-wechat {
			color: #36cb59;
		}

		.icon-alipay {
			color: #01aaef;
		}

		.tit {
			font-size: $base-font-lg;
			color: $base-color-dark;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $base-font-sm;
			color: $base-color-light;
		}
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.pay-box {
			margin: 20px auto;
		}

		.price-box {
			height: 150px;
			font-size: 16px;

			.price {
				font-size: 34px;
				margin-top: 10px;

				&:before {
					content: '￥';
					font-size: 34px;
				}
			}
		}

		.pay-type-list {
			margin-top: 20px;

			.type-item {
				height: 90px;
				padding: 20px 30px;
				cursor: pointer;
				border-top: 1px solid $base-color-light;

				&:first-child {
					border: 0;
				}
			}

			.icon {
				margin-right: 20px;
				font-size: 30px;
			}

			.tit {
				font-size: 16px;
				margin-bottom: 4px;
			}

			.con {
				font-size: 14px;
			}
		}

	}

	/* #endif */
</style>
